<script setup lang="ts">
import { useDesign } from '@fl/hooks/web/useDesign'
import { useI18n } from '@fl/hooks/web/useI18n'
import { useUserStore } from '@fl/store/modules/user'
import { ElDropdown, ElDropdownItem, ElDropdownMenu } from 'element-plus'

import projPackage from '../../../../package.json'

const userStore = useUserStore()

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('user-info')

const { t } = useI18n()

function loginOut() {
    userStore.logoutConfirm()
}
</script>

<template>
    <ElDropdown class="custom-hover"
                :class="prefixCls"
                trigger="click"
    >
        <div class="flex h-full items-center">
            <span class="<lg:hidden pl-[5px] text-14px text-[var(--top-header-text-color)]">
                {{ userStore.getUserInfo?.sysUser?.userName }}
            </span>
        </div>

        <template #dropdown>
            <ElDropdownMenu>
                <!-- <ElDropdownItem>
                    <div @click="toPage('/personal/personal-center')">
                        个人中心
                    </div>
                </ElDropdownItem> -->

                <ElDropdownItem class="size-full"
                                @click="loginOut"
                >
                    <div>{{ t('common.loginOut') }}</div>
                </ElDropdownItem>

                <ElDropdownItem divided>
                    <div>版本 {{ projPackage.version }}</div>
                </ElDropdownItem>
            </ElDropdownMenu>
        </template>
    </ElDropdown>
</template>

<style scoped lang="less">
.fade-bottom-enter-active,
.fade-bottom-leave-active {
    transition:
        opacity 0.25s,
        transform 0.3s;
}

.fade-bottom-enter-from {
    opacity: 0;
    transform: translateY(-10%);
}

.fade-bottom-leave-to {
    opacity: 0;
    transform: translateY(10%);
}
</style>
